/*
 * Script to display the canvas on the game
 * page and draw lines and edges
 * 
 * Author: Chris Casola
 */

/* The locations of the Choice lines */
var Choices = new Array();

/* The list of edges currently in the Event */
var edgeQueue = new Array();

var canvas;
var context;

/*
 * This function is triggered by the click event on the canvas.
 * It gets the position of the click and draws an edge between
 * the two closest lines.
 */
function addEdgeListener(event) {
	var clickPos = getClickPosition(event);
	var newEdge = createEdge(clickPos.x, clickPos.y);
	
	canvas = document.getElementById('edgeCanvas');
	context = canvas.getContext("2d");

	
	//edgeQueue.push(newEdge);
	
	// TODO send edge to server and wait for success response, then draw the edge
	//sendRequest(new addEdgeRequest(newEdge.left, newEdge.right, newEdge.vPos));
}

function displayEdge() {
	drawEdge(context, '#3f4278', edgeQueue.pop());
}

/*
 * This function draws an edge between the two closest lines from
 * the given coordinate.
 */
function drawEdge(context, lineColor, theEdge) {
	context.strokeStyle = lineColor;
	context.lineWidth = 3;
	
	context.beginPath();
	context.moveTo(Choices[theEdge.left].position, theEdge.vPos);
	context.lineTo(Choices[theEdge.right].position, theEdge.vPos);
	context.stroke();
}

function createEdge(xPos, yPos) {
	var i;
	for (i=0; i < (Choices.length - 1); i++) {
		if ((xPos > Choices[i].position) && (xPos < Choices[i+1].position)) {
			return new Edge(Choices[i].index, Choices[i+1].index, yPos);
		}
	}
}

/*
 * This function draws a vertical line at each of the horizontal
 * positions in the Choices array.
 */
function drawLines(context, lineColor, canvasHeight) {
	context.strokeStyle = lineColor;
	context.lineWidth = 3;
	
	var i;
	for (i=0; i < Choices.length; i++) {
		context.beginPath();
		context.moveTo(Choices[i].position, 0);
		context.lineTo(Choices[i].position, canvasHeight);
		context.stroke();
	}
}

/*
 * This function determines where each line should be placed given
 * the number of lines and the width of the canvas.  It stores the
 * horizontal position of each of these lines in the Choices array.
 */
function computeLineLocations(numLines, canvasWidth) {
	numLines -= 2; /* will draw the left-most and right-most lines separately */
	Choices.push(new Choice("Choice", 1.5, 0));

	var dx = canvasWidth / (numLines + 1);
	var currXPos = 1.5;
	var currChoiceIndex = 1;
	
	while (numLines > 0) {
		currXPos += dx;
		Choices.push(new Choice("Choice", currXPos, currChoiceIndex));
		numLines--;
		currChoiceIndex++;
	}
	
	Choices.push(new Choice("Choice", canvasWidth - 1.5, currChoiceIndex));
}

/*
 * This functions gets the position of the mouse click
 */
function getClickPosition(event) {
	var canvas = document.getElementById('edgeCanvas');
	if (event.x != undefined && event.y != undefined) {
		x = event.x;
		y = event.y;
	}
	else { /* code for firefox */
		x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}	
	x -= canvas.offsetLeft;
	y -= canvas.offsetTop;
	var clickPos = {x: x, y: y};
	return clickPos;
}
